import styles from './index.less';
import { useIntl } from 'umi';

function ShortcutOptions(props: any) {
  const intl = useIntl();

  const onSelect = (type: string) => {
    typeof props.onSelect === 'function' && props.onSelect(type);
  };

  return (
    <div className={styles.variablesColumn}>
      <div className={styles.variableSelection}>
        <div className={styles.items}>
          <div className={`${styles.item} ${styles.title}`}>
            {intl.formatMessage({ id: 'variables' })}
          </div>
          <div
            className={styles.item}
            onClick={() => onSelect('name')}
          >{`{{ ${intl.formatMessage({ id: 'name' })} }}`}</div>
          <div
            className={styles.item}
            onClick={() => onSelect('lastName')}
          >{`{{ ${intl.formatMessage({ id: 'lastname' })} }}`}</div>
          <div
            className={styles.item}
            onClick={() => onSelect('email')}
          >{`{{ ${intl.formatMessage({ id: 'email' })} }}`}</div>
          <div
            className={styles.item}
            onClick={() => onSelect('phone')}
          >{`{{ ${intl.formatMessage({ id: 'phonenumber' })} }}`}</div>
          <div
            className={styles.item}
            onClick={() => onSelect('companyName')}
          >{`{{ ${intl.formatMessage({ id: 'companyname' })} }}`}</div>
          <div
            className={styles.item}
            onClick={() => onSelect('jobTitle')}
          >{`{{ ${intl.formatMessage({ id: 'jobtitle' })} }}`}</div>
          <div
            className={styles.item}
            onClick={() => onSelect('contactOwner')}
          >{`{{ ${intl.formatMessage({ id: 'contactowner' })} }}`}</div>
          <div
            className={styles.item}
            onClick={() => onSelect('leadStage')}
          >{`{{ ${intl.formatMessage({ id: 'leadstage' })} }}`}</div>
          <div
            className={styles.item}
            onClick={() => onSelect('leadSource')}
          >{`{{ ${intl.formatMessage({ id: 'leadsource' })} }}`}</div>
          <div
            className={styles.item}
            onClick={() => onSelect('priority')}
          >{`{{ ${intl.formatMessage({ id: 'priority' })} }}`}</div>
          {/* <div className={styles.item} onClick={() => onSelect('country')}>{`{{ ${intl.formatMessage({ id: 'country'})} }}`}</div> */}
          <div
            className={styles.item}
            onClick={() => onSelect('subscriber')}
          >{`{{ ${intl.formatMessage({ id: 'subscriber' })} }}`}</div>
          <div
            className={styles.item}
            onClick={() => onSelect('lastContactFromYou')}
          >{`{{ ${intl.formatMessage({ id: 'lastcontactfromyou' })} }}`}</div>
        </div>
      </div>
    </div>
  );
}

export default ShortcutOptions;
